<template>
  <section class="setting-container">
    <h4 class="drawer-title">导航布局</h4>
    <t-radio-group v-model="currentThemeConfig.themeLayout">
      <div class="setting-layout-drawer">
        <t-radio-button value="sidebar">
          <img src="@/assets/images/img/sidebar.png" alt="" />
        </t-radio-button>
      </div>
      <div class="setting-layout-drawer">
        <t-radio-button value="header">
          <img src="@/assets/images/img/header.png" alt="" />
        </t-radio-button>
      </div>
      <div class="setting-layout-drawer">
        <t-radio-button value="compose">
          <img src="@/assets/images/img/compose.png" alt="" />
        </t-radio-button>
      </div>
    </t-radio-group>
    <h4 class="margin-top-xl drawer-title">主题模式</h4>
    <t-radio-group v-model="currentThemeConfig.themeMode">
      <div class="setting-layout-drawer">
        <t-radio-button value="light">
          <img src="@/assets/images/img/light.png" alt="" />
        </t-radio-button>
      </div>
      <div class="setting-layout-drawer">
        <t-radio-button value="dark">
          <img src="@/assets/images/img/dark.png" alt="" />
        </t-radio-button>
      </div>
    </t-radio-group>
    <h3 class="margin-top-xl drawer-title">主题色</h3>
    <t-space direction="vertical">
      <div class="border inline">
        <t-radio-group v-model="currentThemeConfig.themeColor">
          <div
            class="setting-color-drawer"
            v-for="(item, index) in themeSet"
            :key="item"
          >
            <t-radio-button :value="item">
              <div
                class="color-container"
                :style="{ 'background-color': item }"
              ></div>
            </t-radio-button>
          </div>
          <div class="setting-color-drawer">
            <t-radio-button :value="customColor">
              <t-color-picker
                v-model="customColor"
                :recentColors="null"
                format="HEX"
                enableAlpha
                :color-modes="['monochrome']"
                :show-primary-color-preview="true"
              >
                <div class="color-container dynamic-color-btn"></div>
              </t-color-picker>
            </t-radio-button>
          </div>
        </t-radio-group>
      </div>
      <div class="border padding flex justify-between align-center">
        <t-color-picker
          v-model="currentThemeConfig.sideBarBg"
          :recentColors="null"
          format="HEX"
          enableAlpha
          :color-modes="['monochrome']"
          :show-primary-color-preview="true"
          clearable
        />
        <p>侧边栏颜色</p>
      </div>
      <div class="border padding flex justify-between align-center">
        <t-color-picker
          format="HEX"
          v-model="currentThemeConfig.fontAndIconDefault"
          :recentColors="null"
          enableAlpha
          :color-modes="['monochrome']"
          :show-primary-color-preview="true"
          clearable
        />
        <p>文字和图标默认状态颜色</p>
      </div>
      <div class="border padding flex justify-between align-center">
        <t-color-picker
          format="HEX"
          v-model="currentThemeConfig.fontAndIconSelected"
          :recentColors="null"
          enableAlpha
          :color-modes="['monochrome']"
          :show-primary-color-preview="true"
          clearable
        />
        <p>文字和图标选中状态颜色</p>
      </div>
    </t-space>
  </section>
</template>
<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useSystemStore } from '@/store/modules/system';
import type { ThemeConfigProps } from '@/store/interface/index';
const store = useSystemStore();
const { themeConfig } = storeToRefs(store);
// 主题色
const themeSet = ref([
  '#3053EB',
  '#0594FA',
  '#00A870',
  '#EBB105',
  '#ED7B2F',
  '#E34D59',
  '#ED49B4',
  '#834EC2',
]);
let customColor = ref('');
// 配置项
let currentThemeConfig = ref<ThemeConfigProps>(themeConfig.value);
onMounted(() => {
  if (!themeSet.value.includes(themeConfig.value.themeColor)) {
    customColor.value = themeConfig.value.themeColor;
  }
});

watch(
  () => customColor.value,
  () => {
    currentThemeConfig.value.themeColor = customColor.value;
  },
);
watch(
  () => currentThemeConfig.value.themeMode,
  newVal => {
    if (newVal === 'dark') {
      currentThemeConfig.value.sideBarBg = '#242424';
      currentThemeConfig.value.fontAndIconDefault = 'rgba(255,255,255,.55)';
      currentThemeConfig.value.fontAndIconSelected = '#FFFFFF';
    } else {
      currentThemeConfig.value.sideBarBg = '#FFFFFF';
      currentThemeConfig.value.fontAndIconDefault = 'rgba(0, 0, 0, 0.9)';
      currentThemeConfig.value.fontAndIconSelected = '#FFFFFF';
    }
  },
);
watch(
  () => currentThemeConfig.value,
  () => {
    store.SET_THEME_CONFIG(currentThemeConfig.value);
  },
);
</script>
<style lang="scss" scoped>
.drawer-title {
  margin-bottom: 12px;
}

.setting-container {
  .t-radio-group {
    .setting-layout-drawer {
      .t-radio-button {
        height: auto;
        padding: 10px;
        margin-right: 16px;
        border-width: 2px;
      }
    }

    .setting-color-drawer {
      border-radius: 50%;

      .t-radio-button {
        padding: 6px;
        margin-right: 5px;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        border-width: 2px;

        &:not(.t-is-checked) {
          border-color: transparent;
        }

        :deep(.t-radio-button__label) {
          height: 24px;

          .color-container {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: inline-block;
          }
        }
      }
    }
  }
}

.inline {
  display: inline-block;
  padding: 10px;
}

.dynamic-color-btn {
  background: conic-gradient(
    from 90deg at 50% 50%,
    rgb(255, 0, 0) -19.41deg,
    rgb(255, 0, 0) 18.76deg,
    rgb(255, 138, 0) 59.32deg,
    rgb(255, 230, 0) 99.87deg,
    rgb(20, 255, 0) 141.65deg,
    rgb(0, 163, 255) 177.72deg,
    rgb(5, 0, 255) 220.23deg,
    rgb(173, 0, 255) 260.13deg,
    rgb(255, 0, 199) 300.69deg,
    rgb(255, 0, 0) 340.59deg,
    rgb(255, 0, 0) 378.76deg
  );
}
.dataName {
  @include font_color('font_color');
}
</style>
